<template>
  <el-dialog
    title="新增"
    :close-on-click-modal="false"
    style="min-width: 800px;"
    :visible.sync="visible">
    <div style="text-align: center;">
      <el-upload
        ref="upload"
        drag
        :action="uploadUrl"
        :on-success="handleUploadSuccess"
        :on-error="handleUploadError"
        :data="{'bookId':bookId}">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        uploadUrl: this.$http.adornUrl(`/picbook/picbookitem/uploadItemZip`) + '?token=' + this.$cookie.get('token'),
        bookId: '',
        remark: ''
      }
    },
    methods: {
      init (id) {
        this.bookId = id
        this.visible = true
      },
      //上传成功
      handleUploadSuccess (res, file) {
        // this.dataForm.coverImg = URL.createObjectURL(file.raw)
        if (res && res.code == 0) {
          this.$message.success('上传成功')
          this.visible = false
          this.$emit('refreshDataList')
        } else if (res && res.msg) {
          this.$message.error(res.msg)
        } else {
          this.$message.error('上传失败')
        }
      },
      //上传失败
      handleUploadError (err, file, fileList) {
        this.$message.error('上传失败')
      },
    },
    watch: {
      visible (val) {
        if (!val) {
          this.$refs.upload.clearFiles()
        }
      }
    }
  }
</script>
